<script setup lang="ts">

import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {type Ref, ref} from "vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

const defProps = defineProps({
  placeholder: {
    type: String,
    default: '请选择'
  },
  data: {
    type: Array<any>,
    default: []
  },
  value_label: {
    type: String,
    default: ''
  },
  label_label: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '选择'
  }
})

interface list {
  label: string,
  value: string
  isActive: boolean
}

const value = defineModel({
  type: Array<any>,
  default: []
})


const popup = ref()


const showPopup = () => {
  popup.value.open()
}

const clickItemHandler = (data: list) => {
  // 修改为使用Set实现多选切换
  const newValue = [...value.value]
  const index = newValue.findIndex(v => v === data.value)

  if (index > -1) {
    newValue.splice(index, 1)
  } else {
    newValue.push(data.value)
  }

  value.value = newValue
  data.isActive = !data.isActive
}

const list: Ref<list[]> = ref([])

const init = () => {
  if (defProps.value_label === '' && defProps.label_label === '') {
    list.value = defProps.data.map((item: any) => ({
      label: item,
      value: item,
      // 修正判断逻辑
      isActive: value.value.includes(item)
    }))
    return
  }

  list.value = defProps.data.map((item: any) => ({
    label: item[defProps.label_label],
    value: item[defProps.value_label],
    // 修正判断逻辑
    isActive: value.value.includes(item[defProps.value_label])
  }))
}
init()

</script>

<template>
  <view class="select_border" @click="showPopup">
    <!-- 修改选中显示 -->
    <text v-if="value.length === 0" class="select_placeholder">{{placeholder}}</text>
    <text v-else class="selected-text">已选{{ value.length }}项</text>
  </view>

  <uni-popup ref="popup" background-color="#fff" type="bottom">
    <!-- 添加全选功能 -->
    <view class="title">
      <view class="left">
        <text>{{title}}</text>
        <text class="selected-count">(已选 {{ value.length }} 项)</text>
      </view>
      <view class="right-buttons">
        <text @click="popup.close" class="confirm">确定</text>
      </view>
    </view>

    <view class="popup-content">
      <!-- 添加多选图标 -->
      <view v-for="(item) in list" @click="clickItemHandler(item)"
            :class="['select-item', item.isActive ? 'active' : 'select_item']">
        <view class="item-content">
          <uni-icons v-if="item.isActive" type="checkbox-filled" color="#1473E6" size="20"/>
          <uni-icons v-else type="checkbox" color="#999" size="20"/>
          <text class="label">{{item.label}}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">

.selected-text {
  color: #1473E6;
  font-size: 22rpx;
}

.selected-count {
  color: #999;
  font-size: 22rpx;
  margin-left: 10rpx;
}

.right-buttons {
  display: flex;
  gap: 30rpx;

  .confirm {
    color: #1473E6;
  }
}

.select-item {
  padding: 12rpx 0;
  border-bottom: 1rpx solid #eee;

  .item-content {
    display: flex;
    align-items: center;
    gap: 15rpx;

    .label {
      font-size: 22rpx;
    }
  }
}

.active {
  background-color: #f5f9ff;
}

.title {
  padding: 16rpx;
  font-size: 28rpx;
  line-height: 2;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-content {

  .select_item {
    font-size: 22rpx;
    line-height: 2;
    color: #333333;
    padding: 12rpx;
    border-bottom: 1rpx solid #E5E5E5;
  }
  .active {
    font-size: 22rpx;
    line-height: 2;
    padding: 12rpx;
    color: #1473E6;
    border-bottom: 1rpx solid #1473E6;
  }
  width: 90vw;
  padding: 50rpx 16rpx;
}

.select_border {
  .select_placeholder {
    font-size: 22rpx;
    line-height: 2;
    color: #999999;
  }

  border: 1rpx solid #E5E5E5;
  border-radius: 8rpx;
  padding: 12rpx;
  min-height: 35rpx;
}
</style>